<template>
	<view class="container">
		<!-- 2. 直播视频/推流区域 (使用 live-player 或 video) -->
		<!-- 注意：这里用 view 模拟占位，实际应使用 live-player 或 video -->
        <!-- live-player 用于拉流观看，live-pusher 用于推流开播 -->
		<view class="live-player-placeholder">
            <!-- 如果是观看直播 -->
             <!-- <live-player src="../../static/zanbi.mp4" autoplay /> -->
			 <video style="width: 100%; height: 100vh;" src="../../static/zanbi.mp4" autoplay="autoplay" muted loop :controls="false"></video>
             <!-- 如果是主播开播 -->
             <!-- <live-pusher url="../../static/zanbi.mp4" autopush /> -->
             <!-- <text>直播画面区域</text> -->
        </view>

		<!-- 覆盖在视频上层的内容 -->
		<cover-view class="overlay-container">
			<!-- 1. 顶部信息栏 -->
			<cover-view class="top-bar">
				<cover-view class="streamer-info" @click="gotoStreamerProfile">
					<cover-image class="avatar" src="/static/logo.png"></cover-image>
					<cover-view class="name-follow">
						<cover-view class="name">{{ streamerInfo.name }}</cover-view>
						<cover-view class="followers">{{ streamerInfo.followers }} 粉丝</cover-view>
					</cover-view>
					<cover-view class="follow-btn" @click.stop="toggleFollow">
						<cover-view :class="['follow-icon', isFollowing ? 'followed' : '']">
                            {{ isFollowing ? '已关注' : '+' }}
                        </cover-view>
					</cover-view>
				</cover-view>
				<cover-view class="right-info">
					<cover-view class="online-count">
                        <cover-view class="online-icon"></cover-view> <!-- 小圆点表示在线 -->
                        {{ onlineCount }} 在看
                    </cover-view>
					<cover-view class="exit-btn" @click="exitLiveRoom">×</cover-view>
				</cover-view>
			</cover-view>

            <!-- 4. 礼物动画显示区域 (简化占位) -->
            <cover-view class="gift-animation-area">
                <!-- 实际项目中这里会动态插入礼物动画组件 -->
                <cover-view v-if="showingGift" class="gift-display">
                    <cover-image :src="showingGift.senderAvatar" class="gift-sender-avatar"></cover-image>
                    <cover-view class="gift-text-info">
                        <cover-view class="gift-sender-name">{{ showingGift.senderName }}</cover-view>
                        <cover-view class="gift-action">送出 {{ showingGift.giftName }} x{{ showingGift.count }}</cover-view>
                    </cover-view>
                    <cover-image :src="showingGift.giftImage" class="gift-image"></cover-image>
                </cover-view>
            </cover-view>

			<!-- 3. 底部互动区域 -->
			<cover-view class="bottom-bar">
                <!-- 弹幕显示区域 -->
                <scroll-view class="danmaku-list" scroll-y="true" :scroll-into-view="lastDanmakuId" scroll-with-animation="true">
                    <cover-view v-for="(danmaku, index) in danmakuList" :key="index" :id="'danmaku-' + index" class="danmaku-item">
                        <cover-view class="danmaku-content">
                            <cover-view class="danmaku-name">{{ danmaku.name }}: </cover-view>
                            <cover-view class="danmaku-text">{{ danmaku.text }}</cover-view>
                        </cover-view>
                    </cover-view>
                </scroll-view>

                <!-- 输入与操作按钮 -->
				<cover-view class="action-area">
					<cover-view class="input-placeholder" @click="openInputPopup">说点什么...</cover-view>
					<!-- <input class="chat-input" placeholder="说点什么..." /> --> <!-- cover-view 不支持 input，需要用 view 弹窗实现 -->
					<cover-view class="action-buttons">
                        <!-- <cover-view class="action-btn share-btn">分享</cover-view> -->
						<cover-view class="action-btn gift-btn" @click="toggleGiftPopup">
                            <cover-image src="/static/gift-icon.png" class="gift-icon"></cover-image> <!-- 替换为礼物图标 -->
                        </cover-view>
                        <!-- <cover-view class="action-btn send-btn">发送</cover-view> -->
					</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>

        <!-- 礼物弹窗 (使用普通 view，因为它不需要覆盖在视频上) -->
        <view :class="['gift-popup', { show: showGiftPopup }]">
            <view class="gift-popup-header">
                <text>赠送礼物</text>
                <text class="close-popup" @click="toggleGiftPopup">×</text>
            </view>
            <scroll-view class="gift-list" scroll-y="true">
                <view class="gift-grid">
                    <view class="gift-item" v-for="(gift, index) in giftList" :key="index" @click="selectGift(gift)">
                        <image class="gift-item-image" :src="gift.image" mode="aspectFit"></image>
                        <text class="gift-item-name">{{ gift.name }}</text>
                        <text class="gift-item-price">{{ gift.price }} {{ gift.currency }}</text>
                    </view>
                </view>
            </scroll-view>
            <view class="gift-popup-footer">
                <view class="balance-info">余额: {{ userBalance }}</view>
                <button class="send-gift-btn" @click="sendGift" :disabled="!selectedGift">赠送</button>
            </view>
        </view>
        <!-- 礼物弹窗遮罩 -->
        <view class="popup-mask" v-if="showGiftPopup" @click="toggleGiftPopup"></view>

        <!-- 输入弹窗 (模拟) -->
        <view class="input-popup" v-if="showInputPopup">
             <input class="real-input" v-model="danmakuInput" placeholder="善言结善缘~" :focus="showInputPopup" @confirm="sendDanmaku"/>
             <button class="send-danmaku-btn" @click="sendDanmaku">发送</button>
        </view>
        <view class="popup-mask" v-if="showInputPopup" @click="closeInputPopup"></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				streamerInfo: {
					id: '123',
					name: 'AI讲师-小智',
					avatar: '/static/logo.png', // 替换为实际头像
                    followers: '1.5M'
				},
                isFollowing: false,
				onlineCount: '1.8k',
                danmakuList: [ // 模拟弹幕数据
                    { name: '观众A', text: '老师讲得真好！' },
                    { name: '学霸B', text: '这个知识点有点难' },
                    { name: '游客C', text: '666' },
                    { name: '粉丝D', text: '主播好漂亮~' },
                    { name: '观众E', text: '跟主播学到了很多！' },
                ],
                lastDanmakuId: '', // 用于滚动到最新弹幕
                danmakuInput: '', // 弹幕输入内容
                showInputPopup: false, // 是否显示输入弹窗
                showGiftPopup: false, // 是否显示礼物弹窗
                giftList: [ // 模拟礼物数据
                    { id: 'g1', name: '小花花', price: 1, currency: '钻石', image: '/static/gift-flower.png' }, // 替换为礼物图片
                    { id: 'g2', name: '棒棒糖', price: 5, currency: '钻石', image: '/static/gift-lolipop.png' },
                    { id: 'g3', name: '掌声', price: 10, currency: '钻石', image: '/static/gift-clap.png' },
                    { id: 'g4', name: '小火箭', price: 50, currency: '钻石', image: '/static/gift-rocket.png' },
                    { id: 'g5', name: '跑车', price: 100, currency: '钻石', image: '/static/gift-car.png' },
                    { id: 'g6', name: '飞机', price: 500, currency: '钻石', image: '/static/gift-plane.png' },
                    { id: 'g7', name: '城堡', price: 1000, currency: '钻石', image: '/static/gift-castle.png' },
                    { id: 'g8', name: '皇冠', price: 2000, currency: '钻石', image: '/static/gift-crown.png' },
                    { id: 'g9', name: '宇宙飞船', price: 5000, currency: '钻石', image: '/static/gift-ship.png' },
                    { id: 'g10', name: '超级火箭', price: 10000, currency: '钻石', image: '/static/gift-super-rocket.png' },
                ],
                selectedGift: null, // 当前选中的礼物
                userBalance: 1500, // 模拟用户余额
                showingGift: null, // 当前正在展示的礼物动画信息
                giftAnimationTimer: null, // 礼物动画计时器
			};
		},
        onLoad(options) {
            // options 包含页面跳转时传递的参数，例如直播间ID
            console.log('进入直播间，参数:', options);
            // 根据直播间ID获取直播流地址、主播信息等
            this.addMockDanmaku(); // 模拟接收弹幕
        },
		onShow() {
			uni.hideTabBar();//隐藏tabar
		},
        onUnload() {
            // 页面卸载时清除定时器等
            if (this.giftAnimationTimer) {
                clearTimeout(this.giftAnimationTimer);
            }
            // 可以在这里上报观看时长等信息
        },
		methods: {
			gotoStreamerProfile() {
				console.log('跳转到主播个人页:', this.streamerInfo.id);
				// uni.navigateTo({ url: '/pages/profile/profile?id=' + this.streamerInfo.id });
                uni.showToast({ title: '跳转主播主页', icon: 'none' });
			},
			toggleFollow() {
                this.isFollowing = !this.isFollowing;
				console.log(this.isFollowing ? '关注主播' : '取消关注主播');
                // 调用关注/取关接口
                uni.showToast({ title: this.isFollowing ? '关注成功' : '已取消关注', icon: 'none' });
			},
			exitLiveRoom() {
				console.log('退出直播间');
				uni.navigateBack(); // 或跳转到其他页面
			},
            openInputPopup() {
                this.showInputPopup = true;
            },
            closeInputPopup() {
                this.showInputPopup = false;
                this.danmakuInput = ''; // 关闭时清空输入
            },
			sendDanmaku() {
                if (!this.danmakuInput.trim()) {
                    uni.showToast({ title: '请输入内容', icon: 'none' });
                    return;
                }
				console.log('发送弹幕:', this.danmakuInput);
                // 模拟发送成功后添加到列表
                this.danmakuList.push({ name: '我', text: this.danmakuInput });
                this.$nextTick(() => { // DOM 更新后滚动
                    this.lastDanmakuId = 'danmaku-' + (this.danmakuList.length - 1);
                });
                this.closeInputPopup(); // 发送后关闭输入框
                // 调用发送弹幕接口...
			},
            addMockDanmaku() {
                // 模拟不断接收新弹幕
                setInterval(() => {
                    const names = ['路人甲', '小学生', '大佬', '萌新', '铁粉'];
                    const texts = ['来了来了', '主播666', '这波操作秀', '学到了', '哈哈哈', '？？？', '签到', '晚上好'];
                    const name = names[Math.floor(Math.random() * names.length)];
                    const text = texts[Math.floor(Math.random() * texts.length)];
                    this.danmakuList.push({ name, text });
                    // 限制弹幕数量，防止过多导致性能问题
                    if (this.danmakuList.length > 100) {
                        this.danmakuList.shift();
                    }
                    this.$nextTick(() => {
                        this.lastDanmakuId = 'danmaku-' + (this.danmakuList.length - 1);
                    });
                }, 3000);
            },
            toggleGiftPopup() {
                this.showGiftPopup = !this.showGiftPopup;
                if (!this.showGiftPopup) {
                    this.selectedGift = null; // 关闭时清空选择
                }
            },
            selectGift(gift) {
                console.log('选中礼物:', gift.name);
                this.selectedGift = gift;
                // 可以添加选中效果
            },
            sendGift() {
                if (!this.selectedGift) return;
                if (this.userBalance < this.selectedGift.price) {
                    uni.showToast({ title: '余额不足', icon: 'none' });
                    return;
                }
                console.log('赠送礼物:', this.selectedGift.name);
                // 扣除余额
                this.userBalance -= this.selectedGift.price;
                // 调用赠送礼物接口...

                // 模拟礼物动画显示
                this.showGiftAnimation({
                    senderName: '我', // 实际应为当前用户信息
                    senderAvatar: '/static/my-avatar.png', // 替换为用户头像
                    giftName: this.selectedGift.name,
                    giftImage: this.selectedGift.image,
                    count: 1 // 礼物数量，后续可扩展连击
                });

                this.toggleGiftPopup(); // 发送后关闭弹窗
            },
            // 模拟显示礼物动画（简单版本）
            showGiftAnimation(giftInfo) {
                if (this.giftAnimationTimer) {
                    clearTimeout(this.giftAnimationTimer); // 清除上一个动画的计时器
                }
                this.showingGift = giftInfo;
                // 动画持续一段时间后消失
                this.giftAnimationTimer = setTimeout(() => {
                    this.showingGift = null;
                }, 3000); // 持续3秒
            }
		}
	}
</script>

<style lang="scss">
	/* cover-view 内不支持嵌套，不支持 border 相关，背景色支持不完善，不支持 linear-gradient */
    /* 颜色和布局考虑 22-35 岁群体：现代、简洁、重点突出 */
	.container {
		width: 100vw;
		height: 100vh;
		background-color: #000; /* 直播背景通常为黑色 */
        position: relative; /* 为了弹窗定位 */
        overflow: hidden; /* 防止内容溢出 */
	}

	.live-player-placeholder {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
        background-color: #333; /* 视频区域占位背景 */
        display: flex;
        justify-content: center;
        align-items: center;
        color: #666;
        font-size: 30rpx;
	}

	.overlay-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
        /* background-color: rgba(0,0,0,0.1); */ /* cover-view 背景色支持可能不佳 */
        /* pointer-events: none; */ /* 允许点击穿透到底层视频，但需要交互的元素要设置 pointer-events: auto; */
	}

	/* 1. 顶部信息栏 */
	.top-bar {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding: 20rpx 25rpx;
        padding-top: calc(var(--status-bar-height) + 20rpx); /* 适配状态栏 */
		display: flex;
		justify-content: space-between;
		align-items: center;
        box-sizing: border-box;
        /* pointer-events: auto; */ /* 顶部区域需要交互 */
        z-index: 10;

		.streamer-info {
			display: flex;
			align-items: center;
			background-color: rgba(0, 0, 0, 0.3); /* 半透明背景 */
			border-radius: 40rpx;
			padding: 8rpx 8rpx 8rpx 10rpx;
            /* pointer-events: auto; */

			.avatar {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				margin-right: 15rpx;
                background-color: #eee; /* 占位 */
			}

			.name-follow {
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin-right: 20rpx;

                .name {
                    color: #fff;
                    font-size: 26rpx;
                    font-weight: bold;
                    line-height: 1.2;
                }
                .followers {
                    color: #eee;
                    font-size: 20rpx;
                    line-height: 1.2;
                }
            }

			.follow-btn {
                /* pointer-events: auto; */
                .follow-icon {
                    width: 48rpx;
                    height: 48rpx;
                    border-radius: 50%;
                    background-color: $uni-color-primary; /* 鲜艳的关注按钮 */
                    color: #fff;
                    font-size: 30rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-weight: bold;
                    transition: background-color 0.2s;

                    &.followed {
                        background-color: rgba(255, 255, 255, 0.3);
                        font-size: 20rpx; /* "已关注"字号小一点 */
                        font-weight: normal;
                    }
                }
			}
		}

		.right-info {
			display: flex;
			align-items: center;
            /* pointer-events: auto; */

            .online-count {
                display: flex;
                align-items: center;
                color: #fff;
                font-size: 24rpx;
                background-color: rgba(0, 0, 0, 0.3);
                padding: 8rpx 15rpx;
                border-radius: 20rpx;
                margin-right: 20rpx;

                .online-icon {
                    width: 12rpx;
                    height: 12rpx;
                    background-color: #52c41a; /* 绿色表示在线 */
                    border-radius: 50%;
                    margin-right: 8rpx;
                }
            }

			.exit-btn {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				background-color: rgba(0, 0, 0, 0.3);
				color: #fff;
				font-size: 35rpx;
				display: flex;
				justify-content: center;
				align-items: center;
                line-height: 1;
                /* pointer-events: auto; */
			}
		}
	}

    /* 4. 礼物动画区域 */
    .gift-animation-area {
        position: absolute;
        top: 50%; /* 大概在顶部下方 */
        left: 25rpx;
        width: 500rpx; /* 根据设计调整 */
        height: 200rpx; /* 根据设计调整 */
        z-index: 5; /* 在弹幕之上，顶部之下 */
        /* pointer-events: none; */ /* 动画区域不响应点击 */

        .gift-display {
            display: flex;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
            border-radius: 50rpx;
            padding: 10rpx 20rpx 10rpx 10rpx;
            /* 简单的进入动画 */
            animation: gift-enter 0.5s ease-out;

            .gift-sender-avatar {
                width: 60rpx;
                height: 60rpx;
                border-radius: 50%;
                margin-right: 15rpx;
                background-color: #eee;
            }
            .gift-text-info {
                flex: 1;
                margin-right: 15rpx;
                .gift-sender-name {
                    color: #fff;
                    font-size: 24rpx;
                    font-weight: bold;
                }
                .gift-action {
                    color: #eee;
                    font-size: 22rpx;
                }
            }
            .gift-image {
                width: 80rpx;
                height: 80rpx;
            }
        }
    }

    @keyframes gift-enter {
        from {
            transform: translateX(-100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }


	/* 3. 底部互动区域 */
	.bottom-bar {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
        padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx); /* 适配底部安全区 */
        padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		display: flex;
        flex-direction: column; /* 弹幕和操作区分开 */
        box-sizing: border-box;
        z-index: 10;
        /* pointer-events: none; */ /* 允许穿透，具体按钮再开启 */

        .danmaku-list {
            width: 70%; /* 弹幕区域宽度 */
            height: 300rpx; /* 弹幕区域高度 */
            margin-bottom: 15rpx;
            margin-left: 25rpx;
            /* pointer-events: none; */ /* 弹幕本身不响应点击 */

            .danmaku-item {
                margin-bottom: 10rpx;
                /* pointer-events: none; */

                .danmaku-content {
                    display: inline-flex; /* 让背景适应内容宽度 */
                    background-color: rgba(0, 0, 0, 0.3);
                    padding: 8rpx 15rpx;
                    border-radius: 20rpx;
                    line-height: 1.4;

                    .danmaku-name {
                        color: #ffc107; /* 发言者名字颜色 */
                        font-size: 24rpx;
                        margin-right: 8rpx;
                        font-weight: bold;
                    }
                    .danmaku-text {
                        color: #fff;
                        font-size: 24rpx;
                    }
                }
            }
        }

		.action-area {
            display: flex;
            align-items: center;
            padding: 0 25rpx;
            /* pointer-events: auto; */ /* 操作区域需要交互 */

            .input-placeholder {
                flex: 1;
                height: 70rpx;
                background-color: rgba(255, 255, 255, 0.2);
                border-radius: 35rpx;
                color: #ccc;
                font-size: 26rpx;
                padding: 0 30rpx;
                display: flex;
                align-items: center;
                margin-right: 20rpx;
                /* pointer-events: auto; */
            }

            .action-buttons {
                display: flex;
                align-items: center;
                /* pointer-events: auto; */

                .action-btn {
                    width: 70rpx;
                    height: 70rpx;
                    border-radius: 50%;
                    background-color: rgba(255, 255, 255, 0.2);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: 15rpx;
                    /* pointer-events: auto; */
                }

                .gift-btn {
                    background-color: rgba(255, 193, 7, 0.3); /* 礼物按钮用醒目颜色 */
                    .gift-icon {
                        width: 40rpx;
                        height: 40rpx;
                    }
                }
            }
        }
	}

    /* 礼物弹窗样式 */
    .popup-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 998; /* 在弹窗下面 */
    }

    .gift-popup {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        border-top-left-radius: 20rpx;
        border-top-right-radius: 20rpx;
        transform: translateY(100%); /* 初始隐藏在下方 */
        transition: transform 0.3s ease-out;
        z-index: 999;
        display: flex;
        flex-direction: column;
        /* 预估一个最大高度，防止内容过多撑满屏幕 */
        max-height: 60vh; /* 最高占屏幕60% */
        padding-bottom: constant(safe-area-inset-bottom); /* 适配底部安全区 */
        padding-bottom: env(safe-area-inset-bottom);

        &.show {
            transform: translateY(0); /* 显示时移上来 */
        }

        .gift-popup-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20rpx 30rpx;
            border-bottom: 1rpx solid #f0f0f0;
            font-size: 30rpx;
            font-weight: bold;
            color: #333;

            .close-popup {
                font-size: 40rpx;
                color: #999;
                font-weight: normal;
            }
        }

        .gift-list {
            flex: 1; /* 占据剩余空间 */
            overflow-y: auto;
            padding: 15rpx 0; /* 上下留点空隙 */
            /* 隐藏滚动条 */
            &::-webkit-scrollbar {
                display: none;
                width: 0 !important;
                height: 0 !important;
                -webkit-appearance: none;
                background: transparent;
                color: transparent;
            }
        }

        .gift-grid {
            display: flex;
            flex-wrap: wrap; /* 允许换行 */
            padding: 0 15rpx; /* 左右给点边距 */

            .gift-item {
                width: 20%; /* 一行显示五个 */
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 20rpx 0;
                box-sizing: border-box;
                border: 2rpx solid transparent; /* 预留边框位置 */
                border-radius: 10rpx;
                transition: background-color 0.2s;

                &:active {
                    background-color: #f5f5f5;
                }
                /* &.selected { // 可以给选中项加样式
                    border-color: $uni-color-primary;
                    background-color: #e6f7ff;
                } */

                .gift-item-image {
                    width: 80rpx;
                    height: 80rpx;
                    margin-bottom: 10rpx;
                }
                .gift-item-name {
                    font-size: 24rpx;
                    color: #333;
                    margin-bottom: 5rpx;
                }
                .gift-item-price {
                    font-size: 22rpx;
                    color: #fa8c16; /* 价格用橙色 */
                }
            }
        }

        .gift-popup-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20rpx 30rpx;
            border-top: 1rpx solid #f0f0f0;

            .balance-info {
                font-size: 26rpx;
                color: #666;
            }
            .send-gift-btn {
                padding: 0 40rpx;
                height: 60rpx;
                line-height: 60rpx;
                font-size: 28rpx;
                border-radius: 30rpx;
                background-color: $uni-color-primary;
                color: #fff;
                margin: 0; /* 清除 button 默认 margin */

                &[disabled] {
                    background-color: #ccc;
                    color: #fff;
                }
            }
        }
    }

    /* 输入弹窗样式 */
    .input-popup {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        display: flex;
        align-items: center;
        padding: 15rpx 20rpx;
        padding-bottom: calc(constant(safe-area-inset-bottom) + 15rpx);
        padding-bottom: calc(env(safe-area-inset-bottom) + 15rpx);
        z-index: 1000;
        border-top: 1rpx solid #eee;

        .real-input {
            flex: 1;
            height: 70rpx;
            background-color: #f5f5f5;
            border-radius: 35rpx;
            padding: 0 25rpx;
            font-size: 28rpx;
            margin-right: 15rpx;
        }
        .send-danmaku-btn {
            padding: 0 30rpx;
            height: 70rpx;
            line-height: 70rpx;
            font-size: 28rpx;
            border-radius: 35rpx;
            background-color: $uni-color-primary;
            color: #fff;
            margin: 0;
        }
    }

    /* 隐藏弹幕滚动条 (之前已有，确认存在) */
    .danmaku-list ::-webkit-scrollbar {
        display: none;
        width: 0 !important;
        height: 0 !important;
        -webkit-appearance: none;
        background: transparent;
        color: transparent;
    }

</style> 